<template>
  <div class="personage">
    <!-- 搜索 -->
    <div class="nav">
      <div class="nav_box">
        <router-link to="/home/index" class="router-link-active"
          >首页</router-link
        >
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/personage/centre" class="router-link-active"
          >个人中心</router-link
        >
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link :to="link" class="router-link-active">{{
          name
        }}</router-link>
      </div>
    </div>
    <el-container>
      <el-aside>
        <div class="title" style="cursor: pointer" @click="zkclick">
          <el-icon color="#e02020" class="ico_1">
            <Menu />
          </el-icon>
          <div class="tet">个人中心</div>
          <el-icon color="#e02020" class="ico_2" v-if="zk">
            <ArrowUp />
          </el-icon>
          <el-icon color="#e02020" class="ico_2" v-else>
            <ArrowDown />
          </el-icon>
        </div>
        <!-- <div
          v-if="zk"
          :class="myitem == i ? 't_item' : 't_item1'"
          v-for="(item, i) in list"
          :key="i"
          style="cursor: pointer"
          @click="citem(i)"
        >
          <div class="tet">
            {{ item.name }}
          </div>
        </div> -->
        <div
          v-if="zk"
          :class="{ menuitem: true, t_item: $route.path === item.link }"
          v-for="(item, i) in list"
          :key="i"
          exact
          @click="citem(i)"
          class="t_item1"
        >
          <router-link :to="item.link" class="rou">
            {{ item.name }}
          </router-link>
        </div>
      </el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let Router = useRouter()
const list = ref([
  { name: '个人信息', link: '/home/personage/centre' },
  { name: '我的留言', link: '/home/personage/leave' },
  { name: '我的评论', link: '/home/personage/discuss' },
  { name: '我的空间', link: '/home/personage/interspace' },
  { name: '待我审核', link: '/home/personage/audit' },
  { name: '修改密码', link: '/home/personage/amend' }
])
const position: any = localStorage.getItem('position')
const xz = () => {
  if (position > 2) {
    list.value = [
      { name: '个人信息', link: '/home/personage/centre' },
      { name: '我的留言', link: '/home/personage/leave' },
      { name: '我的评论', link: '/home/personage/discuss' },
      { name: '我的空间', link: '/home/personage/interspace' },
      { name: '修改密码', link: '/home/personage/amend' }
    ]
  }
}
xz()
const myitem = ref(0)
const link = ref('/home/personage/centre')
const name = ref('个人信息')
const citem = (ev: number) => {
  myitem.value = ev
  link.value = list.value[ev].link
  name.value = list.value[ev].name
  Router.push(link.value)
  // console.log(link.value)
  // console.log(ev, myitem.value)
}
// 展开
const zk = ref(true)
const zkclick = () => {
  zk.value = !zk.value
}
</script>

<style lang="scss" scoped>
.el-container {
  .el-aside {
    width: 232px;
    background-color: #fff;
    margin: 0 16px;

    .t_item {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: #e02020;
      font-size: 14px;
      border-radius: 2px;
      background: rgba(224, 32, 32, 0.1);
      .rou {
        color: #e02020 !important;
        margin-left: 44px;
        text-decoration: none;
      }
      .tet {
        margin-left: 44px;
      }
    }

    .t_item1 {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      .rou {
        color: rgba(0, 0, 0, 0.6);
        text-decoration: none;
        margin-left: 44px;
      }
      .tet {
        margin-left: 44px;
      }
    }

    .title {
      display: flex;
      width: 216px;
      height: 36px;
      line-height: 36px;
      margin: 16px 8px 0;

      .ico_1 {
        margin: 10px 8px 0 20px;
        font-size: 15px;
      }

      .ico_2 {
        font-size: 15px;
        margin: 10px 8px 0 80px;
      }

      .tet {
        font-size: 14px;
        color: #e02020;
      }
    }
  }

  .el-main {
    width: 816px;
    overflow: hidden;
    // padding: 0 !important;
  }
}

.nav {
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;

  .nav_box {
    margin-left: 44px;
    font-size: 16px;
    color: #999999;

    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }

    .el-icon {
      margin: 15px 10px 0 10px;
    }
  }
}

// @media (min-width: 2160px) {
//   .personage {
//     width: 100%;
//     margin: 0 auto;
//     height: 1200px;
//   }
// }

// @media (max-width: 2159px) {
.personage {
  width: 1080px;
  margin: 0 auto;
}

// }
</style>
